<template>
  <div class="page-box">
    <div class="content-box">
      <div class="title">
        <img :src="userInfo.avatar || defaultAvatar" @error="onAvatarError" class="avatar-img" />
        <div class="user-phone">{{ userInfo.name || "游客" }}</div>
        <div class="btn-box">
          <el-button simple style="width: 75%" @click="logout">退出登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useMobileStore } from "@/stores/modules/mobile";
import { useRouter } from "vue-router";
const router = useRouter();
const mobileStore = useMobileStore();

import defaultAvatar from "@/views/mobile/home/images/avatar.png";
const userInfo = ref<any>({
  name: mobileStore.name,
  avatar: mobileStore.avatar
});
const onAvatarError = (e: Event) => {
  console.log("Failed to load avatar image:", (e.target as HTMLImageElement).src);
  console.log("Using default avatar:", defaultAvatar);
  (e.target as HTMLImageElement).src = defaultAvatar;
};

const logout = () => {
  mobileStore.clear();
  router.replace("/mobile/login");
};
</script>
<style lang="scss" scoped>
.page-box {
  position: relative;
  width: 100%;
  height: 95%;
  .content-box {
    margin: 16px;
    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      .avatar-img {
        width: 128px;
        height: 128px;
        object-fit: cover;
        border-radius: 50%;
      }
    }
    .btn-box {
      position: absolute;
      bottom: 128px;
      display: flex;
      justify-content: center;
      width: 100%;
    }
  }
}
</style>
